/// <reference types="../../../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
import { ref, computed, onBeforeUnmount } from "vue";
const isPlaying = ref(false);
const playbackInterval = ref(null);
const currentIndex = ref(0);
const playbackSpeed = 800; // 播放速度(ms)
// 时间范围设置
const startTime = new Date(2025, 3, 15, 8, 0);
const endTime = new Date(2025, 3, 15, 9, 0);
// 生成6分钟间隔的时间点
const timePoints = computed(() => {
  const points = [];
  let current = new Date(startTime);
  while (current <= endTime) {
    points.push(new Date(current));
    current = new Date(current.getTime() + 6 * 60000); // 增加6分钟
  }
  return points;
});
// 生成滑块标记
const marks = computed(() => {
  const markObj = {};
  const interval = Math.max(1, Math.floor(timePoints.value.length / 10));
  timePoints.value.forEach((time, index) => {
    // 只显示部分标记避免拥挤
    if (index % interval === 0 || index === 0 || index === timePoints.value.length - 1) {
      markObj[index] = {
        style: { color: "#1989FA" },
        label: formatShortTime(time)
      };
    }
  });
  return markObj;
});
const formatTime = date => {
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${hours}:${minutes}`;
};
const formatShortTime = date => {
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return `${hours}:${minutes}`;
};
const startPlayback = () => {
  if (currentIndex.value >= timePoints.value.length - 1) {
    currentIndex.value = 0; // 如果到末尾则回到起点
  }
  isPlaying.value = true;
  // 清除现有定时器
  if (playbackInterval.value) {
    clearInterval(playbackInterval.value);
  }
  playbackInterval.value = setInterval(() => {
    if (currentIndex.value < timePoints.value.length - 1) {
      currentIndex.value += 1;
    } else {
      pausePlayback(); // 到达末尾时停止
    }
  }, playbackSpeed);
};
const pausePlayback = () => {
  isPlaying.value = false;
  if (playbackInterval.value) {
    clearInterval(playbackInterval.value);
    playbackInterval.value = null;
  }
};
const stepForward = () => {
  pausePlayback();
  currentIndex.value = Math.min(currentIndex.value + 1, timePoints.value.length - 1);
};
const stepBackward = () => {
  pausePlayback();
  currentIndex.value = Math.max(currentIndex.value - 1, 0);
};
const handleSliderChange = value => {
  console.log(value);
  pausePlayback();
};
// 组件卸载时清除定时器
onBeforeUnmount(() => {
  pausePlayback();
});
debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
const __VLS_ctx = {};
let __VLS_components;
let __VLS_directives;
// CSS variable injection
// CSS variable injection end
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ class: "timeline-point" }
});
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ class: "slider-demo-block" }
});
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ class: "play-pause" }
});
const __VLS_0 = {}.ElIcon;
/** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ // @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent(
  __VLS_0,
  new __VLS_0({
    ...{ onClick: {} },
    ...{ class: "play-icon" }
  })
);
const __VLS_2 = __VLS_1(
  {
    ...{ onClick: {} },
    ...{ class: "play-icon" }
  },
  ...__VLS_functionalComponentArgsRest(__VLS_1)
);
let __VLS_4;
let __VLS_5;
let __VLS_6;
const __VLS_7 = {
  onClick: __VLS_ctx.startPlayback
};
__VLS_asFunctionalDirective(__VLS_directives.vShow)(
  null,
  { ...__VLS_directiveBindingRestFields, value: !__VLS_ctx.isPlaying },
  null,
  null
);
__VLS_3.slots.default;
const __VLS_8 = {}.VideoPlay;
/** @type {[typeof __VLS_components.VideoPlay, ]} */ // @ts-ignore
const __VLS_9 = __VLS_asFunctionalComponent(__VLS_8, new __VLS_8({}));
const __VLS_10 = __VLS_9({}, ...__VLS_functionalComponentArgsRest(__VLS_9));
var __VLS_3;
const __VLS_12 = {}.ElIcon;
/** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ // @ts-ignore
const __VLS_13 = __VLS_asFunctionalComponent(
  __VLS_12,
  new __VLS_12({
    ...{ onClick: {} },
    ...{ class: "pause-icon" }
  })
);
const __VLS_14 = __VLS_13(
  {
    ...{ onClick: {} },
    ...{ class: "pause-icon" }
  },
  ...__VLS_functionalComponentArgsRest(__VLS_13)
);
let __VLS_16;
let __VLS_17;
let __VLS_18;
const __VLS_19 = {
  onClick: __VLS_ctx.pausePlayback
};
__VLS_asFunctionalDirective(__VLS_directives.vShow)(
  null,
  { ...__VLS_directiveBindingRestFields, value: __VLS_ctx.isPlaying },
  null,
  null
);
__VLS_15.slots.default;
const __VLS_20 = {}.VideoPause;
/** @type {[typeof __VLS_components.VideoPause, ]} */ // @ts-ignore
const __VLS_21 = __VLS_asFunctionalComponent(__VLS_20, new __VLS_20({}));
const __VLS_22 = __VLS_21({}, ...__VLS_functionalComponentArgsRest(__VLS_21));
var __VLS_15;
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ onClick: __VLS_ctx.stepBackward },
  ...{ class: "back" }
});
const __VLS_24 = {}.ElIcon;
/** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ // @ts-ignore
const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({}));
const __VLS_26 = __VLS_25({}, ...__VLS_functionalComponentArgsRest(__VLS_25));
__VLS_27.slots.default;
const __VLS_28 = {}.ArrowLeftBold;
/** @type {[typeof __VLS_components.ArrowLeftBold, ]} */ // @ts-ignore
const __VLS_29 = __VLS_asFunctionalComponent(__VLS_28, new __VLS_28({}));
const __VLS_30 = __VLS_29({}, ...__VLS_functionalComponentArgsRest(__VLS_29));
var __VLS_27;
const __VLS_32 = {}.ElSlider;
/** @type {[typeof __VLS_components.ElSlider, typeof __VLS_components.elSlider, ]} */ // @ts-ignore
const __VLS_33 = __VLS_asFunctionalComponent(
  __VLS_32,
  new __VLS_32({
    ...{ onChange: {} },
    modelValue: __VLS_ctx.currentIndex,
    marks: __VLS_ctx.marks,
    showTooltip: false,
    min: 0,
    max: __VLS_ctx.timePoints.length - 1,
    step: 1
  })
);
const __VLS_34 = __VLS_33(
  {
    ...{ onChange: {} },
    modelValue: __VLS_ctx.currentIndex,
    marks: __VLS_ctx.marks,
    showTooltip: false,
    min: 0,
    max: __VLS_ctx.timePoints.length - 1,
    step: 1
  },
  ...__VLS_functionalComponentArgsRest(__VLS_33)
);
let __VLS_36;
let __VLS_37;
let __VLS_38;
const __VLS_39 = {
  onChange: __VLS_ctx.handleSliderChange
};
var __VLS_35;
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ onClick: __VLS_ctx.stepForward },
  ...{ class: "forward" }
});
const __VLS_40 = {}.ElIcon;
/** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ // @ts-ignore
const __VLS_41 = __VLS_asFunctionalComponent(__VLS_40, new __VLS_40({}));
const __VLS_42 = __VLS_41({}, ...__VLS_functionalComponentArgsRest(__VLS_41));
__VLS_43.slots.default;
const __VLS_44 = {}.ArrowRightBold;
/** @type {[typeof __VLS_components.ArrowRightBold, ]} */ // @ts-ignore
const __VLS_45 = __VLS_asFunctionalComponent(__VLS_44, new __VLS_44({}));
const __VLS_46 = __VLS_45({}, ...__VLS_functionalComponentArgsRest(__VLS_45));
var __VLS_43;
__VLS_asFunctionalElement(
  __VLS_intrinsicElements.div,
  __VLS_intrinsicElements.div
)({
  ...{ class: "timeline-point__label" }
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
__VLS_ctx.formatTime(__VLS_ctx.startTime);
__VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
__VLS_ctx.formatTime(__VLS_ctx.endTime);
/** @type {__VLS_StyleScopedClasses['timeline-point']} */ /** @type {__VLS_StyleScopedClasses['slider-demo-block']} */ /** @type {__VLS_StyleScopedClasses['play-pause']} */ /** @type {__VLS_StyleScopedClasses['play-icon']} */ /** @type {__VLS_StyleScopedClasses['pause-icon']} */ /** @type {__VLS_StyleScopedClasses['back']} */ /** @type {__VLS_StyleScopedClasses['forward']} */ /** @type {__VLS_StyleScopedClasses['timeline-point__label']} */ var __VLS_dollars;
const __VLS_self = (await import("vue")).defineComponent({
  setup() {
    return {
      isPlaying: isPlaying,
      currentIndex: currentIndex,
      startTime: startTime,
      endTime: endTime,
      timePoints: timePoints,
      marks: marks,
      formatTime: formatTime,
      startPlayback: startPlayback,
      pausePlayback: pausePlayback,
      stepForward: stepForward,
      stepBackward: stepBackward,
      handleSliderChange: handleSliderChange
    };
  }
});
export default (await import("vue")).defineComponent({
  setup() {
    return {};
  }
}); /* PartiallyEnd: #4569/main.vue */
